<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jq/jquery.js"></script>
</head>
<body>

    <div id="content" style="border:1px solid black;height: 300px;width:400px;">

    </div>
    <input type="button" value="ajax" onclick="sendAjax()">
    <input type="button" value="ajax" onclick="sendAjax2()">
    <ul>
        <li onclick="changePage('home')">home</li>
        <li onclick="changePage('user')">user</li>
        <li onclick="changePageStatic()">static</li>
    </ul>
    <script>
        // $.get(url[,data][,succes][,dataType])发送简单定义的get http请求

        // $.post(url[,data][,succes][,dataType])发送简单定义的post http请求
        function sendAjax(){
            // $.get("/jquery/test",{a:100,b:200},function(data){
            //     console.log(data);
            // },"json");

            $.post("/jquery/test",{a:100,b:200},function(data){
                console.log(data);
            },"json");
        }
        // $.getScript(url[,succes])发送简单定义的get http请求,并会自动完成js脚本解析执行的异步请求
        function sendAjax2(){
            // $.get("/jquery/script",function(data){
            //     // console.log(data);
            // },"script");

            $.getScript("/jquery/script");//直接运行js代码
        }

        // jquery对象.load(url [, data ][,complete ])从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中
        // 如果传递参数是一个对象，使用post方式
        // 默认使用get
        function changePage(str){
            $("#content").load("/jquery/temp",{name:str});
        }

        function changePageStatic(){
            $("#content").load("/03.html");
        }

    </script>
</body>
</html>